<template>
  <div>
    <top></top>
    <div class="head-img">
      <h1>注册企业，招聘人才</h1>
    </div>
    <div class="step-box">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="完善基本信息"></el-step>
        <el-step title="完善公司信息"></el-step>
        <!-- <el-step title="去发布"></el-step> -->
      </el-steps>
    </div>
    <div class="wrap-center">
      <!-- 公司输入框 -->
      <div class="firm-input-box">
        <div v-if="num==1">
          <div class="title">头像</div>
          <div class="tit-img">
            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>

          <div class="input-bpx">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="公司法人" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入公司法人姓名"></el-input>
              </el-form-item>
              <el-form-item label="招聘联系人" prop="post">
                <el-input v-model="ruleForm.post" placeholder="请输入招聘联系人"></el-input>
              </el-form-item>
              <el-form-item prop="email" label="企业邮箱">
                <el-input v-model="ruleForm.email" placeholder="请填写常用邮箱,支持在招聘设置里修改"></el-input>
              </el-form-item>
              <el-form-item prop="firmname" label="公司名称">
                <el-input v-model="ruleForm.firmname" placeholder="请填写与公司营业执照/公司发票/劳动合同一致的公司名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 完善公司信息 -->
        <div v-if="num==2" class="wrap-ruleForm2">
          <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="150px" class="demo-ruleForm">
            <el-form-item label="公司详细地址" prop="name">
              <el-input v-model="ruleForm2.name" placeholder="请输入公司详细地址"></el-input>
            </el-form-item>
            <el-form-item label="公司社会信用代码" prop="credit">
              <el-input v-model="ruleForm2.credit" placeholder="请输入公司社会信用代码"></el-input>
            </el-form-item>
            <el-form-item label="公司注册资本" prop="price">
              <el-input v-model="ruleForm2.price" placeholder="请输入公司注册资本"></el-input>
            </el-form-item>
            <el-form-item label="企业招聘联系电话" prop="phone">
              <el-input v-model="ruleForm2.phone" placeholder="请输入企业招聘电话"></el-input>
            </el-form-item>
            <el-form-item label="公司官网" prop="website">
              <el-input v-model="ruleForm2.website" placeholder="请输入公司官网"></el-input>
            </el-form-item>
            <el-form-item label="公司产品" prop="product">
              <el-input v-model="ruleForm2.product" placeholder="请输入公司产品"></el-input>
            </el-form-item>
            <el-form-item label="企业类别" prop="region">
              <el-select v-model="ruleForm2.region" placeholder="请选企业类别">
                <el-option label="无限责任公司" value="shanghai"></el-option>
                <el-option label="有限责任公司" value="beijing"></el-option>
                <el-option label="股份有限公司" value="shanghai1"></el-option>
                <el-option label="股份两合公司" value="beijing2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="成立日期" required>
              <el-col :span="11">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择成立日期" v-model="ruleForm2.date1" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2">-----</el-col>
              <el-col :span="11">
                <el-form-item prop="date2">
                  <el-time-picker placeholder="选择成立时间" v-model="ruleForm2.date2" style="width: 100%;"></el-time-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="企业简介" prop="desc">
              <el-input type="textarea" v-model="ruleForm2.desc"></el-input>
            </el-form-item>
            <el-form-item label="企业发展历程" prop="desc2">
              <el-input type="textarea" v-model="ruleForm2.desc2"></el-input>
            </el-form-item>
            <!-- 企业营业执照 -->
            <div class="wrap-phone-box">
              <p class="business">请上传公司营业执照</p>
              <div class="phone-box">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess2" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl2" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <p class="business ">企业法人身份证
                <span class="shenfne">(正反面)</span>
              </p>
              <div class="phone-box">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </div>

            <el-form-item>
              <el-button type="primary" @click="submitForm2('ruleForm2')">现在发布</el-button>
              <el-button @click="resetForm2('ruleForm2')">重置</el-button>
              <el-button @click="single">上一步</el-button>

            </el-form-item>
          </el-form>
          <!-- <el-button @click="single"></el-button> -->

        </div>
      </div>
      <div class="firm-img-box">
        <div class="firm-text">
          <div class="img-box"><img :src="img"></div>
          <p class="laname">
            <span class="names">公司法人:</span>
            <span class="la">{{ruleForm.name}}</span>
          </p>
          <p class="laname">
            <span class="names">招聘联系人:</span>
            <span class="la">{{ruleForm.post}}</span>
          </p>

          <div class="wire-box">
            <p class="laname">
              <span class="names">企业邮箱:</span>
              <span class="la">{{ruleForm.email}}</span>
            </p>
            <p class="laname">
              <span class="names">公司名称:</span>
              <span class="la">{{ruleForm.firmname}}</span>
            </p>
          </div>
        </div>
      </div>

    </div>
    <bottom></bottom>
  </div>
</template>
<script>
import top from "./top";
import bottom from "./bottom";

export default {
  components: { top, bottom },
  data() {
    return {
      active: 0,
      imageUrl: "",
      imageUrl2: "",
      dialogImageUrl: "",
      dialogVisible: false,
      num: 1,
      img: "../../static/img/banner1.jpg",
      ruleForm: {
        name: "",
        post: "",
        email: "",
        firmname: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入名字", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        post: [
          { required: true, message: "请输入职位", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        firmname: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ]
      },
      // 完善公司信息
      ruleForm2: {
        name: "",
        region: "",
        website: "",
        date1: "",
        date2: "",
        type: [],
        resource: "",
        desc: "",
        credit: "",
        price: "",
        phone: "",
        product: "",
        desc2: ""
      },
      rules2: {
        name: [
          { required: true, message: "请输入公司详细地址", trigger: "blur" },
          { min: 2, max: 12, message: "长度在2到12 个字符", trigger: "blur" }
        ],
        product: [
          { required: true, message: "请输入公司产品", trigger: "blur" }
        ],
        credit: [
          {
            required: true,
            message: "请输入公司社会信用代码",
            trigger: "blur"
          },
          { min: 2, max: 12, message: "长度在2到12 个字符", trigger: "blur" }
        ],
        price: [
          {
            required: true,
            message: "请输入公司注册资本",
            trigger: "blur"
          },
          { min: 1, max: 12, message: "长度在2到12 个字符", trigger: "blur" }
        ],
        phone: [
          {
            required: true,
            message: "请输入企业招聘人联系电话",
            trigger: "blur"
          },
          { min: 6, max: 11, message: "长度在6到11 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择企业类别", trigger: "change" }
        ],
        website: [
          { required: true, message: "请输入公司官网", trigger: "blur" }
          // { min: 2, max: 12, message: "长度在2到12 个字符", trigger: "blur" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],

        resource: [
          { required: true, message: "请选择公司简介", trigger: "change" }
        ],
        desc: [{ required: true, message: "请输入公司简介", trigger: "blur" }],
        desc2: [{ required: true, message: "请输入公司历程", trigger: "blur" }]
      }
    };
  },
  methods: {
    single() {
      this.active--;
      if (this.active-- < 1) this.active = 0;
      this.num = 1;
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    // 完善公司信息
    submitForm2(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          this.$router.push({ name: "firminfopublish" });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm2(formName) {
      this.$refs[formName].resetFields();
    },
    // 公司营业执照
    handleAvatarSuccess2(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    // 头像
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 表单
    submitForm(formName) {
      // console.log(formName);
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.active++ > 2) this.active = 0;
          this.num = 2;
          // alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 企业法人身份证
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped>
.head-img {
  width: 100%;
  height: 200px;
  background-image: url("../../static/img/bg1.jpg");
  background-size: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  color: #fff;
}
.wrap-center {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
  overflow: hidden;
}
.step-box {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 60px;
}
.firm-input-box {
  width: 70%;
  float: left;
  /* border: 1px solid red; */
}
.firm-img-box {
  width: 29.5%;
  float: left;
  /* border: 1px solid blue; */
}
/* 图片上传 */
.tit-img .el-icon-plus::before {
  content: "\e650";
  font-family: iconfont;
}
.tit-img .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.wrap-phone-box .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
  border: 1px solid #ccc;
}
.tit-img,
.title {
  float: left;
}
.tit-img {
  margin-bottom: 20px;
}
.title {
  margin: 30px 15px 0px 0px;
  font-size: 14px;
  color: #606266;
  width: 85px;
  text-align: right;
}
.input-bpx {
  clear: both;
  max-width: 600px;
}
/* 右侧头像 */
.img-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid #ccc;
  overflow: hidden;
  margin: 0 auto;
}
.img-box img {
  width: 100%;
  height: 100%;
}
.firm-text {
  padding: 10px 25px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #ccc;
  min-height: 260px;
  width: 100%;
  overflow: hidden;
}
.wire-box {
  width: 100%;
  border-top: 1px solid #ccc;
  overflow: hidden;
  padding: 20px 0px;
  box-sizing: border-box;
  margin-top: 10px;
}
.la {
  font-size: 15px;
  color: #8c939d;
  display: block;
  border: 1px solid #fff;
  float: left;
  width: 55%;
  min-height: 20px;
  text-align: left;
}
.names {
  font-weight: 600;
  display: block;
  /* border: 1px solid red; */
  float: left;
  width: 44.3%;
  min-height: 20px;
  text-align: right;
}
.laname {
  overflow: hidden;
}
.wrap-ruleForm2 {
  /* border: 1px solid red; */
  max-width: 650px;
}
.wrap-ruleForm2 .el-col-2 {
  text-align: center;
}
/* 公司营业执照 */
.wrap-phone-box {
  /* border: 1px solid red; */
  max-width: 650px;
  box-sizing: border-box;
}
.business {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding-left: 10px;
}
.phone-box {
  margin-left: 150px;
  margin-bottom: 20px;
}
.shenfne {
  color: red;
  font-size: 12px;
}
</style>

